<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="des20180406" content="p元素会默认上下有间隔,以为是inline-block导致,所以创建此例">
    <!-- 
        另在这里也测试并研究 在 inline-block 时，后面元素靠右问题;  下面例子用inline-block实现了两栏布局; 
        container002 为 第二种方式实现 两栏布局;

        margin 为负数时的应用:  https://www.w3cplus.com/css/the-definitive-guide-to-using-negative-margins.html
    -->
    <title>display:inline-block测试</title>
    <style>
        body,p{
            margin: 0px;
            padding: 0px;
        }
        .content{
            margin-right: 200px;
            font-size: 0;
            letter-spacing: -4px; /*消除inline-block元素之间因为写代码换行符产生的空隙*/
        }
        .content *{
            font-size: 1rem;
            letter-spacing: normal; /*恢复字体大小等*/
        }
        #header-site{
            width: 100%;
            height: 80px;
            background: aqua;
            display: inline-block;
        }
        #header-date{
            display: inline-block;
            width:200px;
            background: red;
            text-align: end;
            margin-right: -200px;
        }
        #header-line{
            height: 2px;
            background: #938E8C;
        }

/*第二种方式实现 两栏布局*/
        .container002{
            position: relative;
            height: 600px;
        }
        .container002 > div{
            position: absolute;
            height: 100%;
            box-sizing: border-box;
            top: 0;
        }
        .leftBox{
            position: absolute;
            left: 0px;
            width: 100%;
            background-color: bisque;
            padding-right: 200px;
            /* display: inline-block; */
        }
        .rightBox{
            right: 0;
            width: 200px;
            background-color: blueviolet;
            /* display: inline-block; */
        }
    </style>
</head>
<body>
    <div class="mainBg">
        <div class="content">
            <div id="header-site">
                aaaaaaaaaaaaaaaaaaaa
            </div>
            <div id="header-date"><p>bbbbbb</p></div>
            <div id="header-line">
            </div>
        </div>
        <div class="container002">
                <div class="leftBox">
                    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>bbbbbbbbbbbbbbbbbbbb<br>cccccccccccccccccc
                </div>
                <div class="rightBox">
                    bbbbbbbbbbbbbbbbbbbb
                </div>
            </div>
    </div>
</body>

</html>